<script setup>
import DoctorCard from './DoctorCard.vue';
import {getDoctorList} from '../api/home'
import {ref,onMounted} from 'vue'

const list = ref()
const onLoad = async ()=>{
    let res= await getDoctorList({current:1,pageSize:5})
    list.value = res.data.rows
}
onMounted(()=>{
    onLoad()
})
</script>

<template>
    <div class="follow-doctor">
        <div className="head">
            <p>推荐关注</p>
            <a href="javascript:;"> 查看更多<i class="van-icon van-icon-arrow" /></a>
        </div>
        <div class="body">
            <van-swipe :width="150" :show-indicators="false" :loop="false" >
                <van-swipe-item v-for="item in list" :key="item.id">
                    <DoctorCard :item="item"/>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
    background-color: var(--cp-bg);
    height: 250px;

    .head {
        display: flex;
        justify-content: space-between;
        height: 45px;
        align-items: center;
        padding: 0 15px;
        font-size: 13px;

        >a {
            color: var(--cp-tip);
        }
    }

    .body {
        width: 100%;
        overflow: hidden;
    }
}</style>